<!DOCTYPE html>
<html lang="<?= locale_to_bcp_47(get_current_locale()) ?>">
    <head>
        <meta charset="UTF-8" />
        <title><?= is_environment('development') ? '[dev] ' : '' ?><?= $has_errors ? _('Error: ') : '' ?><?= $title ?> · <?= get_app_configuration('brand') ?></title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="canonical" href="<?= $this->safe('canonical') ?>">

        <meta name="application-name" content="<?= get_app_configuration('brand') ?>">
        <meta name="theme-color" content="#00d7ad">
        <link rel="manifest" href="<?= url('webmanifest') ?>">
        <link rel="icon" type="image/png" sizes="32x32" href="<?= url_static('icons/icon-32.png') ?>">
        <link rel="icon" type="image/png" sizes="16x16" href="<?= url_static('icons/icon-16.png') ?>">
        <link rel="mask-icon" href="<?= url_static('icons/safari-pinned-tab.svg') ?>" color="#00d7ad">
        <link rel="apple-touch-icon" sizes="180x180" href="<?= url_static('icons/icon-180.png') ?>">
        <meta name="msapplication-TileImage" content="<?= url_static('icons/icon-144.png') ?>">
        <meta name="msapplication-TileColor" content="#00d7ad">

        <link rel="stylesheet" href="<?= url_asset('stylesheets/application.css') ?>" data-turbo-track="reload">

        <script id="javascript-configuration" type="application/json">
            <?= $this->safe('javascript_configuration') ?>
        </script>
        <script src="<?= url_asset('javascripts/application.js') ?>" data-turbo-track="reload" defer></script>

        <?php if (get_app_configuration('plausible_url')): ?>
            <script defer data-domain="<?= get_current_host() ?>" src="<?= get_app_configuration('plausible_url') ?>/js/script.js"></script>
        <?php endif; ?>

        <meta name="csrf-param" content="csrf" />
        <meta name="csrf-token" content="<?= csrf_token() ?>" />
    </head>

    <body>
        <a
            class="no-mobile accessibility-nav anchor--action"
            href="#main-content"
            tabindex="0"
            data-turbo="false"
        >
            <?= _('Skip to main content') ?>
        </a>

        <div class="layout layout--connected layout--blocked" id="layout">
            <noscript>
                <div class="layout__banner layout__banner--alert">
                    <div class="banner__container">
                        <?= _f('You need to activate JavaScript in order to use %s.', get_app_configuration('brand')) ?>
                    </div>
                </div>
            </noscript>

            <?php if (get_app_configuration('demo')): ?>
                <div class="layout__banner">
                    <div class="banner__container">
                        <?= _f('You’re using a demo version of %s, the data are reset every night.', get_app_configuration('brand')) ?>
                    </div>
                </div>
            <?php endif; ?>

            <?php if (!$current_user->validated_at && $current_page !== 'account validation'): ?>
                <div class="layout__banner">
                    <a class="banner__container banner__container--anchor" href="<?= url('account validation') ?>">
                        <?= _('You must validate your account&nbsp;→') ?>
                    </a>
                </div>
            <?php endif; ?>

            <header class="layout__header header">
                <nav class="header__container">
                    <a class="header__link header__link--home no-mobile" href="<?= url('home') ?>">
                        <img
                            alt="flus"
                            src="<?= url_static('logo.svg') ?>"
                            width="120"
                            height="40.6"
                        />
                    </a>

                    <div class="header__separator no-mobile"></div>

                    <details
                        class="header__avatar-container header__secondary popup"
                        data-controller="popup"
                        data-action="toggle->popup#update click@window->popup#closeOnClickOutside keydown->popup#closeOnEscape"
                    >
                        <summary class="popup__opener" title="<?= _f('Menu of %s', protect($current_user->username)) ?>">
                            <img class="header__avatar avatar" src="<?= url_avatar($current_user->avatar_filename) ?>" alt="" />
                            <span class="sr-only">
                                <?= _f('Menu of %s', protect($current_user->username)) ?>
                            </span>
                        </summary>

                        <nav
                            class="popup__container popup__container--large popup__container--left"
                            role="menu"
                        >
                            <div class="popup__title"><?= protect($current_user->username) ?></div>

                            <a
                                class="popup__item popup__item--link"
                                <?= $current_page === 'profile' ? 'aria-current="page"' : '' ?>
                                href="<?= url('edit profile') ?>"
                                role="menuitem"
                            >
                                <?= icon('avatar') ?>
                                <?= _('Profile') ?>
                            </a>

                            <a
                                class="popup__item popup__item--link"
                                <?= $current_page === 'preferences' ? 'aria-current="page"' : '' ?>
                                href="<?= url('preferences') ?>"
                                role="menuitem"
                            >
                                <?= icon('color-palette') ?>
                                <?= _('Preferences') ?>
                            </a>

                            <a
                                class="popup__item popup__item--link"
                                <?= $current_page === 'account' ? 'aria-current="page"' : '' ?>
                                href="<?= url('account') ?>"
                                role="menuitem"
                            >
                                <?= icon('cog') ?>
                                <?= _('Account & data') ?>
                            </a>

                            <div class="popup__separator"></div>

                            <a
                                class="popup__item popup__item--link"
                                <?= $current_page === 'addons' ? 'aria-current="page"' : '' ?>
                                href="<?= url('addons') ?>"
                                role="menuitem"
                            >
                                <?= icon('plugin') ?>
                                <?= _('Add-ons') ?>
                            </a>

                            <a
                                class="popup__item popup__item--link"
                                <?= $current_page === 'support' ? 'aria-current="page"' : '' ?>
                                href="<?= url('support') ?>"
                                role="menuitem"
                            >
                                <?= icon('help') ?>
                                <?= _('Help & support') ?>
                            </a>

                            <div class="popup__separator"></div>

                            <form method="post" action="<?= url('logout') ?>" role="menuitem">
                                <input type="hidden" name="csrf" value="<?= csrf_token() ?>" />
                                <button type="submit" class="popup__item popup__item--button">
                                    <?= icon('logout') ?>
                                    <?= _('Log out') ?>
                                </button>
                            </form>
                        </nav>
                    </details>
                </nav>
            </header>

            <main id="main-content" class="layout__main" tabindex="-1">
                <nav
                    class="layout__back"
                    data-controller="back-button"
                    data-action="popstate@window->back-button#handlePopstate"
                    data-back-button-title-value="<?= $back_options['title'] ?>"
                    data-back-button-reset-value="<?= $back_options['reset'] ? 'true' : 'false' ?>"
                    data-back-button-track-value="<?= $back_options['track'] ? 'true' : 'false' ?>"
                >
                    <a
                        href="#"
                        data-back-button-target="button"
                        data-action="back-button#handleClick"
                    >
                        <?= icon('arrow-left') ?>
                        <?= _('Back') ?>
                    </a>
                </nav>

                <section class="layout__content">
                    <?= $this->safe('content') ?>
                </section>
            </main>
        </div>

        <?= $this->include('_modal.phtml'); ?>
    </body>
</html>
